<template>
<view style="padding: 10px;">
<uni-forms ref="form" :modelValue="formData" :rules="rules">

    <uni-forms-item>
        <uni-file-picker 
        fileMediatype="all"
        value="file"
        @select="select" 
        @progress="progress"
        @success="success"
        @fail="fail"
        />
    </uni-forms-item>
    <uni-forms-item>
        <uni-data-checkbox mode="tag" v-model="formData.priceType" :localdata="l_priceType"></uni-data-checkbox>
        <p v-if="formData.priceType===0" style="color: grey; font-size:6px;">*不足500字即 ￥0.1 / 50 字 ，少于50字即 ￥0.1 。<br>*为了计算简便，含英文的内容推荐选择按页计费。</p>
        <p v-if="formData.priceType===1"></p>
    </uni-forms-item>
    <uni-forms-item><view>
            <uni-data-checkbox mode="tag" v-model="formData.fetch1" :localdata="l_fetch1" @change="change"></uni-data-checkbox>
        </view>

        <view v-if="formData.fetch1===0">
            <uni-data-checkbox mode="tag" v-model="formData.fetch2" :localdata="l_fetch2" @change="change"></uni-data-checkbox>
        </view>

        <view v-if="formData.fetch1===0">
            <uni-data-checkbox :multiple="true" v-model="formData.is_call" :localdata="l_is_call" @change="f1"></uni-data-checkbox>
        </view>

        <view v-show="formData.fetch2===2 && formData.fetch1===0" class="textareaFixed">
            <uni-easyinput v-model="formData.send" type="textarea" autoHeight placeholder="注明是第几宿舍楼口的外卖架子，或教学楼某处，或学院楼下等。本人住6楼，跑一趟挺累腿的。亲们每次多打几页，送起来更有动力不是吗哈哈哈"/>
        </view>
        
        <view v-show="formData.fetch1===1" class="textareaFixed">
            <uni-easyinput v-model="formData.visit" type="textarea" autoHeight placeholder="注明面交的时间地点，需要协商。7元起送"/>
        </view>
    </uni-forms-item>
    
    <uni-forms-item>
        <uni-grid :column="3" :showBorder="false"  :square="false">
            <uni-grid-item>
                <text class="text">文本</text>
            </uni-grid-item>
            <uni-grid-item>
                <text class="text">文本</text>
            </uni-grid-item>
            <uni-grid-item>
                <text class="text">文本</text>
            </uni-grid-item>
            <uni-grid-item>
                <text class="text">文本</text>
            </uni-grid-item>
            <uni-grid-item>

                <img src="../static/logo.png"/>
                <text class="text">文本</text>
            </uni-grid-item>
            <uni-grid-item>
                <text class="text">文本</text>
            </uni-grid-item>
        </uni-grid>
    </uni-forms-item>

    <uni-forms-item label="书写要求" name="name" style="margin:10px 0 10px 0;">
        <uni-easyinput type="textarea" autoHeight v-model="formData.name" placeholder="并非直接付款，请先提交订单，在我向您确认价格和要求后支付" />
    </uni-forms-item>
    <uni-forms-item style="padding:20px 0 10px 0;">
        <button @click="done">Ok！下一步</button>
    </uni-forms-item>

</uni-forms>
</view>

<uni-popup ref="popup1" type="message">
    <uni-popup-message type="info" :duration="2000">{{message}}</uni-popup-message>
</uni-popup>

</template>

<style scoped>
.textareaFixed{
    position: relative;
    padding: .8em 0 .7em 0;
}
</style>

<script>
import uniForms from '@dcloudio/uni-ui/lib/uni-forms/uni-forms.vue'
import uniFormsItem from '@dcloudio/uni-ui/lib/uni-forms-item/uni-forms-item.vue'
import uniEasyinput from '@dcloudio/uni-ui/lib/uni-easyinput/uni-easyinput.vue'
import uniDataCheckbox from '@dcloudio/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vue'
import uniFilePicker from '@dcloudio/uni-ui/lib/uni-file-picker/uni-file-picker.vue'
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
import uniPopupMessage from '@dcloudio/uni-ui/lib/uni-popup-message/uni-popup-message.vue'
import UniGrid from '@dcloudio/uni-ui/lib/uni-grid/uni-grid.vue'
import UniGridItem from '@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item.vue'

export default {
    components: { uniForms, uniFormsItem, uniEasyinput, uniDataCheckbox, uniFilePicker, uniPopup, uniPopupMessage, UniGrid, UniGridItem},
    data() {
        return {
            file: {},
            message: "上传需要书写的文件，可以是任意格式",
            l_priceType: [
                {"value": 0,"text": "￥1.0 / 500字" },
                {"value": 1,"text": "￥0.7 / 页" },
            ],
            l_is_call: [
                {"value": 0,"text": "在可取时通知我" },
                ],
            l_fetch1: [
                {"value": 0,"text": "自取" },
                {"value": 1,"text": "面交"},
                ],
            l_fetch2: [
                {"value": 0,"text": "5舍楼下" },
                {"value": 1,"text": "5舍606"},
                {"value": 2,"text": "其他位置"},
                ],
            formData: {
                fetch1: -1,
                fetch2: 0,
                priceType: 0,
                is_call: [0],
                send: '',
                visit: '',
                name: '',
            },
            rules: {
                // 对name字段进行必填验证
                name: {
                    rules: [
                    ]
                },
                // 对email字段进行必填验证
                email: {
                    rules: [{
                        format: 'email',
                        errorMessage: '请输入正确的邮箱地址',
                    }]
                }
            }
        }
    },
    methods: {
        done() {
            if (this.formData.fetch1===-1){
                this.message+= "上传需要书写的文件，可以是任意格式"
                console.log(this.file);
                this.$refs.popup1.open('top');
            }

        }
    }
}

</script>
